<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="700" destroy-on-close
        @closed="$emit('closed')" custom-class="custom-dialog">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="80px"
            label-position="right">
            <el-form-item label="版本号" prop="versionNumber">
                <el-input v-model="form.versionNumber" :maxlength="50" show-word-limit placeholder="请输入版本号" />
            </el-form-item>
            <el-form-item label="更新内容" prop="updateNotes">
                <el-input type="textarea" v-model="form.updateNotes" :rows="5" :maxlength="500" show-word-limit
                    placeholder="请输入更新内容" />
            </el-form-item>
            <el-form-item label="安装包" prop="downloadUrl">
                <el-input v-model="form.downloadUrl" placeholder="请输入下载地址或上传文件" clearable />
                <!-- <el-alert type="warning" effect="light" show-icon title="测试环境与正式环境的包名不能一样，否则将会覆盖同名文件！" close-text="知道了"
                    :closable="false" style="margin-bottom: 5px">
                </el-alert> -->
                <scUploadButton :fileSelect="this.form.downloadUrl !== ''" title="上传文件"
                    @success="uploadFileSuccess($event)" icon="el-icon-upload2" accept="*" :maxSize="50" style="margin-top:6px;">
                </scUploadButton>
            </el-form-item>
            <el-form-item label="强制更新" prop="forcedUpdating">
                <el-switch v-model="form.forcedUpdating" active-text="是" inactive-text="否"></el-switch>
            </el-form-item>
            <!-- <el-form-item label="应用端" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio :label="1">Android</el-radio>
                    <el-radio :label="2">IOS</el-radio>
                </el-radio-group>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import scUploadButton from '@/components/scUpload/upload_button.vue'
export default {
    components: {
        scUploadButton
    },
    emits: ['success', 'closed'],
    props: {

    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增版本',
                edit: '编辑版本',
                show: '查看'
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: {
                id: "",
                type: 1,
                versionNumber: "",
                forcedUpdating: true,
                downloadUrl: "",
                updateNotes: ""
            },
            //验证规则
            rules: {
                versionNumber: [
                    { required: true, message: '请输入版本号', trigger: 'blur' },
                    { max: 50, message: '版本号不能超过50个字', trigger: 'blur' }
                ],
                updateNotes: [
                    { required: true, message: '请输入更新内容', trigger: 'blur' },
                    { max: 500, message: '更新内容不能超过500个字', trigger: 'blur' }
                ],
                downloadUrl: [
                    { required: true, message: '请上传安装包', trigger: 'blur' },
                ],
            }
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        uploadFileSuccess(file) {
            console.log('uploadFileSuccess', file)
            this.form.downloadUrl = file.path
            this.$refs.dialogForm.clearValidate('downloadUrl')
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    let data = {}
                    for (let key in this.form) {
                        if (key === 'forcedUpdating') {
                            data[key] = this.form[key] ? 1 : 0
                        } else {
                            data[key] = this.form[key]
                        }
                    }

                    var res = null
                    this.isSaveing = true;
                    if (this.mode == 'add'){
                        res = await this.$API.applyVersion.action.post(data).catch(() => {
                            this.isSaveing = false;
                        })
                    }else{
                        res = await this.$API.applyVersion.action.put(data).catch(() => {
                            this.isSaveing = false;
                        })
                    }
                    this.isSaveing = false;
                    if (res.error == 0) {
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$notify.success("保存成功")
                    }
                }
            })
        },
        //表单注入数据
        async setData(data) {
            this.form.id = data.id
            this.form.type = data.type.value
            this.form.versionNumber = data.versionNumber
            this.form.forcedUpdating = (data.forcedUpdating && data.forcedUpdating.value == 1) ? true : false
            this.form.downloadUrl = data.download ? data.download.show : ''
            this.form.updateNotes = data.updateNotes
        }
    }
}
</script>

<style lang="scss">
.el-cascader {
    width: 100%;
}

.imgbox {
    width: 120px;
    height: 120px;

    img {
        width: 100%;
    }
}
</style>
